<template>
  <v-ons-page id="menus">
    <v-ons-toolbar modifier="transparent"></v-ons-toolbar>
    <div class="header">
      
    </div>

    <v-ons-list-title>Onsen UI Essential Links</v-ons-list-title>
    <v-ons-list>
      <v-ons-list-item modifier="chevron" v-for="item in essentialLinks" @click="goTo(item.link)" :key="item.link">
        <div class="left"><v-ons-icon fixed-width :icon="item.icon"></v-ons-icon></div>
        <div class="center">{{ item.label }}</div>
      </v-ons-list-item>
    </v-ons-list>


  <ons-list>
      <v-ons-list-title>aa</v-ons-list-title>
      <ons-list-item tappable>
        <div class="left">
          <ons-radio name="categoryGroup" input-id="r-all" checked></ons-radio>
        </div>
        <label class="center" for="r-all">All</label>
      </ons-list-item>
      <ons-list-item tappable category-id="">
        <div class="left">
          <ons-radio name="categoryGroup" input-id="r-no"></ons-radio>
        </div>
        <label class="center" for="r-no">No category</label>
      </ons-list-item>


  </ons-list>

  
  <v-ons-list-item modifier="chevron" tappable @click="gos">
      <div class="left">
          <v-ons-icon icon="fa-user-circle" class="list-item__icon"></v-ons-icon>
        </div>
        <div class="center">
          设置
        </div>

  </v-ons-list-item>

  </v-ons-page>
</template>

<script>
import UserSettingPage from './UserSettingPage';

export default {
  name: 'menus',
  props: ['pageStack', 'setTabbarIndex', 'setMenuIsOpen'],
  

  data () {
    return {
      essentialLinks: [
        
        {
          label: 'Gitter Chat',
          link: 'https://gitter.im/OnsenUI/OnsenUI',
          icon: 'fa-commenting'
        },
        {
          label: 'Forum',
          link: 'https://community.onsen.io',
          icon: 'ion-chatboxes'
        }
      ]
      
    }
  },
  methods: {

    goTo(url) {
      window.open(url, '_blank')
    },

    gos() {
      this.pageStack.push(
        UserSettingPage
      );
    }
    
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  text-align: center;
  margin-bottom: 20px;
}

img {
  max-width: 150px;
}

ons-list-title {
  text-transform: none;
}

ons-list-item {
  cursor: pointer;
}
</style>
